import React from 'react';
import { connect } from 'dva/index';
import { Button, Form, Table } from 'antd';
import EditMarketInfo from './EditMarketInfo';

let editMarketInfo: any = {};

const MarketInfo = Form.create()(
  class CreateForm extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props: any) {
      super(props);
    }

    handleAdd = (e: any) => {
      if (editMarketInfo) editMarketInfo.handleOpen();
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form


      const MarketInfoColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '客户名称', dataIndex: 'customerName', key: 'customerName' },
        { title: '实际营销时间', dataIndex: 'marketTime', key: 'marketTime' },
        { title: '营销阶段', dataIndex: 'marketStage', key: 'marketStage' },
        { title: '成果定性', dataIndex: 'result', key: 'result' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        { title: '营销人员', dataIndex: 'creator', key: 'creator' },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          // @ts-ignore
          render: (record: any) =>
            <a href="#"
                onClick={() => {
                  if (editMarketInfo) editMarketInfo.handleOpen();
                }}
          >详情</a>,
        },
      ];

      const MarketInfoData = [
          {
            key: '1',
            id: 2,
            serviceNo: 'zbt51591',
            workNo: '61455',
            customerName: '林科技',
            marketTime: '2019-09-10',
            marketStage: '初次交流',
            result: '低于预期',
            desc: '',
            creator: '刘曾荣',
            status: '未处理',
          },
    ];


      // @ts-ignore
      const MarketInfoTable = <Table loading={this.props.loading} rowKey="id" dataSource ={MarketInfoData} columns={MarketInfoColumns} bordered size="middle"/>;

      return (
        <div>
          {/* eslint-disable-next-line react/jsx-no-bind */}
          <Button style={{ marginRight: 8 }} onClick={this.handleAdd.bind(this)}>
            新增
          </Button>
          {MarketInfoTable}
          {/* eslint-disable-next-line no-return-assign,max-len */}
            <EditMarketInfo wrappedComponentRef={(inst: any) => (editMarketInfo = inst)}
                       {...editMarketInfo}
            />
        </div>
      )
    }
  })

function mapStateToProps(state: any) {
    return {
      loading: state.loading.models.order, order: state.order,
    };
}

export default connect(mapStateToProps)(MarketInfo);
